﻿<style>
         /* Success template */
    .k-notification-successAlert.k-group {
        background: rgba(0%, 60%, 0%, .7);
        color: #fff;
    }

    .messageClose {
        margin: 2px 2px 0 0;
        float: right;
        font-size: 24px;
    }

    .messageClose:hover {
        background: rgba(0, 153, 0, 0.2);
        cursor: pointer;
    }
</style>
<script id="successTemplate" type="text/x-kendo-template">
    <div class="successAlert" style="height:100px;width:382px;padding-left:30px;">
        <img src="../../../content/web/notification/success-icon.png" style="float:left;margin-top:32px" />
        <div style="float:left;height:100px;line-height:100px;margin-left:10px"> #= message #</div>
        <span class="messageClose">×</span>
    </div>
</script>
@(Html.Kendo().Notification()
      .Name("notification")
      .Position(p => p.Pinned(true).Bottom(50).Right(30))
      .Stacking(NotificationStackingSettings.Down)
      .HideOnClick(true)
      .Animation(a => a.Open(e => e.SlideIn(SlideDirection.Left)))
      .Templates(t => t.Add().Type("successAlert").ClientTemplateID("successTemplate"))
)

<script type="text/javascript">
        $(function () {
            var notification = $("#notification").data("kendoNotification");
            kendo.alert = function (message) {
                notification.show({
                    message: message
                }, "successAlert");
            };
        })
</script>
